Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[pickers] Let the field components handle their opening UI, and allow field editing on mobile pickers #15671

Draft
wants to merge 107 commits into
base: master
Choose a base branch
from
Draft

[pickers] Let the field components handle their opening UI, and allow field editing on mobile pickers #15671

wants to merge 107 commits into from

Conversation

flaviendelangle
Copy link
Member

@flaviendelangle flaviendelangle commented Nov 29, 2024 •
edited
Loading

Closes #7869
Closes #14787

That one will be hard to split 😬

  • The non-range mobile pickers now open using a button (instead of click)
  • The non-range mobile pickers have now an editable field
  • The opening logique of the non-range pickers is now handled by the field themselves
  • The useClearableField hook is no longer used internally. It can remain available for custom fields during v8, in v9 we will have the composition API for a better DX
  • The clear button and the opening button can now independently be rendered on the start of on the end of the field using the openPickerButtonPosition and clearButtonPosition field props.

Not in this PR:

  • The single input range fields are using the new component that handles the adornments, but the opening button is always hidden (because the useEnrichedRangePickerFieldProps stills handle the opening on click
  • The multi input range fields are not yet using the new component that handles the adornments

Extracted PRs

@flaviendelangle flaviendelangle self-assigned this Nov 29, 2024
@flaviendelangle flaviendelangle added breaking change component: pickers This is the name of the generic UI component, not the React module! labels Nov 29, 2024
@mui-bot
Copy link

mui-bot commented Nov 29, 2024 •
edited
Loading

Localization writing tips ✍️

Seems you are updating localization 🌍 files.

Thank you for contributing to the localization! 🎉 To make your PR perfect, here is a list of elements to check: ✔️

  • Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)

    [l10n] Improve Swedish (sv-SE) locale
    [l10n] Add Danish (da-DK) locale

  • Update the documentation of supported locales by running pnpm l10n
  • Clean files with pnpm prettier.

Deploy preview: https://deploy-preview-15671--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against 61fc6d5

@flaviendelangle flaviendelangle mentioned this pull request Nov 29, 2024
Open
72 tasks
@flaviendelangle flaviendelangle mentioned this pull request Dec 6, 2024
Open
This was referenced Dec 6, 2024
Merged
Merged
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 6, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 6, 2024

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 6, 2024
flaviendelangle
flaviendelangle commented Dec 9, 2024
View reviewed changes
...-date-pickers-pro/src/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.ts
return {
startDate: excludeProps(startDateResponse, ['clearable', 'onClear']),
endDate: excludeProps(endDateResponse, ['clearable', 'onClear']),
startDate: startDateResponse,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is now handled by cleanFieldResponse

packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx
@@ -213,7 +215,7 @@ export const useDesktopRangePicker = <
role="tooltip"
placement="bottom-start"
containerRef={popperRef}
anchorEl={anchorRef.current}
anchorEl={providerProps.contextValue.triggerRef.current}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will use the context directly to access this prop in a follow up

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@flaviendelangle flaviendelangle

Labels
breaking change component: pickers This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
2 participants
@flaviendelangle @mui-bot